<!-- <template>
    <view class="content">
        <view class="info-box ac-detail">
            <view class="ac-title">{{activity.title}}</view>
            <view class="ac-time"><u-icon name="clock" color="#999999"></u-icon> {{activity.activity_time}}</view>
            <view class="ac-address"><u-icon name="map" color="#999999"></u-icon> {{activity.address}}</view>
        </view>
        <block v-if="en_id>0">
        <view class="bk20"> </view>
        <view class="info-box">
            <view class="check-title">签到信息 </view>
            <view class="check-row">
                <view class="label"> 签到人： </view>
                <view class="value"> {{check.name}} </view>
            </view>
            <view class="check-row">
                <view class="label"> 联系电话： </view>
                <view class="value"> {{check.phone}} </view>
            </view>
            
            <u-button @click="checkin" shape="circle" type="primary" text="确认签到"></u-button>
        </view>
        </block>
        <view class="bk20"> </view>
        <view class="info-box">
            <view class="list-title"> 已报名用户 </view>
            <view class="data-list" v-if="dataList.length>0">
                <view class="data-item" v-for="(item,index) in dataList" :key="index">
                    <view class="face-box">
                        <u-avatar size="60" :src="item.user.avatar"></u-avatar>
                    </view>
                    <view class="info">
                        <view class="name">{{item.name}} </view>
                        <view class="phone">{{item.phone}} </view>
                    
                        <block v-if="item.checktime">
                            <view class="check-time checked">已签到：{{$u.timeFormat(item.checktime, 'mm月dd日 hh:MM:ss')}} </view>
                        </block>
                        <block v-else>
                            <view class="check-time">未签到</view>
                        </block>
                    </view>
                </view>
            </view>
            <u-empty v-else mode="data" text="暂无数据" ></u-empty>
        </view>
        <image class="bottom-bg" src="@/static/img/bg2.png"></image>
    </view>
</template> -->

<template>
    <view class="content">
        <view class="info-box ac-detail">
            <view class="ac-title">{{activity.title}}</view>
            <view class="ac-time"><u-icon name="clock" color="#999999"></u-icon> {{activity.activity_time}}</view>
            <view class="ac-address"><u-icon name="map" color="#999999"></u-icon> {{activity.address}}</view>
        </view>
        <block v-if="en_id>0">
        <view class="bk20"> </view>
        <view class="info-box">
            <view class="check-title">签到信息 </view>
            <view class="check-row">
                <view class="label"> 签到人： </view>
                <view class="value"> {{check.name}} </view>
            </view>
            <view class="check-row">
                <view class="label"> 联系电话： </view>
                <view class="value"> {{check.phone}} </view>
            </view>
            
            <u-button @click="checkin" shape="circle" type="primary" text="确认签到"></u-button>
        </view>
        </block>
        <view class="bk20"> </view>
        <view class="info-box">
            <view class="list-title"> 已报名用户 </view>
            <view class="data-list" v-if="dataList.length>0">
                <view class="data-item" v-for="(item,index) in dataList" :key="index">
                    <view class="face-box">
                        <u-avatar size="60" :src="baseUrl+item.user.avatar"></u-avatar>
                    </view>
                    <view class="info">
                        <view class="name">{{item.name}} </view>
                        <view class="phone">{{item.phone}} </view>
                    
                        <block v-if="item.checktime">
                            <view class="check-time checked">已签到：{{$u.timeFormat(item.checktime, 'mm月dd日 hh:MM:ss')}} </view>
                        </block>
                        <block v-else>
                            <view class="check-time">未签到</view>
                        </block>
                    </view>
                </view>
            </view>
            <u-empty v-else mode="data" text="暂无数据" ></u-empty>
        </view>
        <image class="bottom-bg" src="@/static/img/bg2.png"></image>
    </view>
</template>
<!-- <template>
    <view class="content">
        <view class="info-box ac-detail">
            <view class="ac-title">{{activity.title}}</view>
            <view class="ac-time"><u-icon name="clock" color="#999999"></u-icon> {{activity.activity_time}}</view>
            <view class="ac-address"><u-icon name="map" color="#999999"></u-icon> {{activity.address}}</view>
        </view>
        <block v-if="en_id>0">
        <view class="bk20"> </view>
        <view class="info-box">
            <view class="check-title">签到信息 </view>
            <view class="check-row">
                <view class="label"> 签到人： </view>
                <view class="value"> {{check.name}} </view>
            </view>
            <view class="check-row">
                <view class="label"> 联系电话： </view>
                <view class="value"> {{check.phone}} </view>
            </view>
            
            <u-button @click="checkin" shape="circle" type="primary" text="确认签到"></u-button>
        </view>
        </block>
        <view class="bk20"> </view>
        <view class="info-box">
            <view class="list-title"> 已报名用户 </view>
            <view class="data-list" v-if="dataList.length>0">
                <view class="data-item" v-for="(item,index) in dataList" :key="index">
                    <view class="face-box">
                        <u-avatar size="60" :src="item.user.avatar"></u-avatar>
                    </view>
                    <view class="info">
                        <view class="name">{{item.name}} </view>
                        <view class="phone">{{item.phone}} </view>
                    
                        <block v-if="item.checktime">
                            <view class="check-time checked">已签到：{{$u.timeFormat(item.checktime, 'mm月dd日 hh:MM:ss')}} </view>
                        </block>
                        <block v-else>
                            <view class="check-time">未签到</view>
                        </block>
                    </view>
                </view>
            </view>
            <u-empty v-else mode="data" text="暂无数据" ></u-empty>
        </view>
        <image class="bottom-bg" src="@/static/img/bg2.png"></image>
    </view>
</template> -->
<script>
// export default {
//         data() {
//             return {
//                 ac_id:0,
//                 en_id:0,
//                 check:{},
//                 activity:{},
//                 dataList:[],
//                 page:1, // 当前页
//                 totalPage:1,
//                 per_page:8,
//             }
//         },
//         onLoad(e) {
//             this.ac_id = e.ac_id?e.ac_id:0
//             this.en_id = e.en_id?e.en_id:0
//             this.getData()
//             // 获取活动详情
//             let params = {
//                 id: this.ac_id,
//             }
//             uni.$u.http.get('/activity/detail',{params: params}).then((res) => {
//                 if(res.code==1){
//                     this.activity = res.data
//                 }
//             })
//         },
//         onPullDownRefresh() {
//             this.page = 1
//             this.dataList = []
//             this.getData()
//         },
//         onReachBottom() {
//             if (this.page == this.totalPage) return false
//             this.page = this.page + 1
//             this.getData()
//         },
//         methods: {
//             checkin(){
//                 uni.$u.http.post('/enrollment/checkin', {ac_id:this.ac_id,en_id:this.en_id}).then((res) => {
//                     if(res.code==1){
//                         setTimeout(()=>{
//                             this.en_id = 0
//                         },2000)
//                         uni.$u.toast(res.msg)
//                         uni.startPullDownRefresh()
//                     }
//                 })
//             },
//             getData(){
//                 let params = {
//                     activity_id: this.ac_id,
//                     per_page: this.per_page,
//                     page: this.page,
//                 }
//                 uni.$u.http.get('/enrollment/enrollment_list',{params: params}).then((res) => {
//                     if(res.code==1){
//                         this.page = res.data.current_page
//                         this.totalPage = res.data.last_page
//                         this.dataList = [...this.dataList,...res.data.data]
//                         uni.stopPullDownRefresh()
//                         if(this.en_id>0){
//                             res.data.data.forEach(item => {
//                                 if(item.id==this.en_id){
//                                     this.check = item
//                                 }
//                             });
//                         }
//                     }else{
//                         setTimeout(()=>{
//                             uni.navigateBack()
//                         },2000)
//                     }
//                 })
//             }
//         },
//     }



export default {
        data() {
            return {
                ac_id:0,
                en_id:0,
                check:{},
                activity:{},
                dataList:[],
                page:1, // 当前页
                totalPage:1,
                per_page:8,
				avater:'',
            }
        },
        onLoad(e) {
            this.ac_id = e.ac_id?e.ac_id:0
            this.en_id = e.en_id?e.en_id:0
            this.getData()
            // 获取活动详情
            let params = {
                id: this.ac_id,
            }
            uni.$u.http.get('/activity/detail',{params: params}).then((res) => {
                if(res.code==1){
                    this.activity = res.data
                }
            })
        },
        onPullDownRefresh() {
            this.page = 1
            this.dataList = []
            this.getData()
        },
        onReachBottom() {
            if (this.page == this.totalPage) return false
            this.page = this.page + 1
            this.getData()
			
        },
        methods: {
            checkin(){
                uni.$u.http.post('/enrollment/checkin', {ac_id:this.ac_id,en_id:this.en_id}).then((res) => {
                    if(res.code==1){
                        setTimeout(()=>{
                            this.en_id = 0
                        },100)
                        uni.$u.toast(res.msg)
                        uni.startPullDownRefresh()
                    }
                })
            },
            getData(){
                let params = {
                    activity_id: this.ac_id,
                    per_page: this.per_page,
                    page: this.page,
                }
                uni.$u.http.get('/enrollment/enrollment_list',{params: params}).then((res) => {
                    if(res.code==1){
                        this.page = res.data.current_page
                        this.totalPage = res.data.last_page
                        this.dataList = [...this.dataList,...res.data.data]
                        uni.stopPullDownRefresh()
                        if(this.en_id>0){
                            res.data.data.forEach(item => {
                                if(item.id==this.en_id){
                                    this.check = item
                                }
                            });
                        }
                    }else{
                        setTimeout(()=>{
                            uni.navigateBack()
                        },100)
                    }
                })
            }
        },
    }
</script>

<style lang="scss">
.bk20{
        height: 20px;
    }
    .content{
        position: relative;
        background-color: rgb(249,249,249);
        height: 100vh;
        padding: 10px;
        .info-box{
            padding: 20px;
            border-radius: 28px;
            background: #FFFFFF;
            .check-title{
                font-weight: 600;
                font-size: 18px;
                text-align: center;
                margin-bottom: 10px;
            }
            .check-row{
                display: flex;
                line-height: 1.5;
                margin-bottom: 10px;
                .label{
                    font-weight: 600;
                }
            }
            .ac-title{
                font-size: 18px;
                font-weight: 600;
                color: rgba(51, 51, 51, 1);
                margin-bottom: 10px;
            }
            .ac-time,.ac-address{
                font-size: 12px;
                font-weight: 400;
                line-height: 2;
                color: #999999;
                display: flex;
                /deep/.u-icon{
                    margin-right: 4px;
                }
            }
            .list-title{
                font-size: 18px;
                font-weight: 600;
                line-height: 2;
            }
            .data-list{
                position: relative;
                z-index: 2;
                padding-top: 10px;
                .data-item{
                    padding: 6px 0;
                    display: flex;
                    justify-content: space-between;
                    .face-box{
                        width: 80px;
                        .face{
                            width: 50px;
                            height: 50px;
                            border-radius: 50px;
                        }
                    }
                    .info{
                        flex: 1;
                        .name{
                            font-weight: 600;
                            line-height: 1.5;
                        }
                        .check-time{
                            font-size: 12px;
                            color:$uni-color-error
                        }
                        .checked{
                            color:$uni-color-success
                        }
                    }
                    .check-status{
                        width: 60px;
                        text-align: center;
                    }
                }
            }
        }
        .bottom-bg{
            z-index: 1;
            position: fixed;
            left: 10vw;
            bottom: 0;
            width: 80vw;
            height: calc(80vw / 520 * 346 );
        }
    }
</style>
